<template>
  <!-- 这里是全部评论页 -->
  <el-card class="box-card">
    <!-- 买家印象 -->
    <span style="font-size: 60px; color: red">100</span>%
    <span><div style="margin-left: 4vh">好评度</div> </span>
    <div style="color: red; margin-left: 26vh; margin-top: -11vh">买家印象</div>
    <div>
      <q class="comm-tags"><span>味道不错</span><em>(2157)</em></q>
      <q class="comm-tag"><span>性价比高</span><em>(6965)</em></q>
      <q class="comm-tag"><span>强烈推荐</span><em>(7157)</em></q>
      <q class="comm-tag"><span>回头客</span><em>(5209)</em></q>
      <q class="comm-tag"><span>安利种草</span><em>(3876)</em></q>
      <q class="comm-tag"><span>超级可爱</span><em>(6340)</em></q>
    </div>
    <div>
      <q class="comm-tagss"><span>超级好！</span><em>(1764)</em></q>
      <q class="comm-tag"><span>顶顶顶</span><em>(7453)</em></q>
      <q class="comm-tag"><span>价格实惠</span><em>(8932)</em></q>
      <q class="comm-tag"><span>干净营养</span><em>(6872)</em></q>
    </div>
    <!-- 好评差评的框 -->
    <el-card class="card1">
      <span style="margin-left: 9rem">全部好评（999+）</span>
      <span style="margin-left: 9rem">好评（999+）</span>
      <span style="margin-left: 9rem">中评（25）</span>
      <span style="margin-left: 9rem">差评（1）</span>
    </el-card>
    <!-- 评论 -->
    <div>
      <div class="demo-basic--circle">
        <div class="block">
          <el-avatar
            :size="50"
            src="https://cdn.jsdelivr.net/gh/81674944/blog_imgs/img/tx.jpg"
          ></el-avatar>
        </div>
        <el-card class="card2">
          <div slot="header" class="clearfix">
            <div class="am-comment-meta">
              <!-- 评论元数据 -->
              <a>黄炎榕</a>
              <!-- 评论者 -->
              <span style="color: rgb(233, 233, 233); margin-left: 2rem"
                >评论于2021年08月22日 18:14</span
              >
            </div>
          </div>
          <span>好评！真不错</span>
        </el-card>
      </div>
      <div>
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar
              :size="50"
              src="https://cdn.jsdelivr.net/gh/81674944/blog_imgs/img/hyh.jpg"
            ></el-avatar>
          </div>
          <el-card class="card2">
            <div slot="header" class="clearfix">
              <div class="am-comment-meta">
                <!-- 评论元数据 -->
                <a>黄宇煌</a>
                <!-- 评论者 -->
                <span style="color: rgb(233, 233, 233); margin-left: 2rem"
                  >评论于2021年08月21日 17:46</span
                >
              </div>
            </div>
            <span>好评！真不错</span>
          </el-card>
        </div>
      </div>
      <div>
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar
              :size="50"
              src="https://cdn.jsdelivr.net/gh/81674944/blog_imgs/img/xmt.jpg"
            ></el-avatar>
          </div>
          <el-card class="card2">
            <div slot="header" class="clearfix">
              <div class="am-comment-meta">
                <!-- 评论元数据 -->
                <a>许梦婷</a>
                <!-- 评论者 -->
                <span style="color: rgb(233, 233, 233); margin-left: 2rem"
                  >评论于2021年08月19日 16:36</span
                >
              </div>
            </div>
            <span>好评！真不错</span>
          </el-card>
        </div>
      </div>
      <div>
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar
              :size="50"
              src="https://cdn.jsdelivr.net/gh/81674944/blog_imgs/img/zlh.jpg"
            ></el-avatar>
          </div>
          <el-card class="card2">
            <div slot="header" class="clearfix">
              <div class="am-comment-meta">
                <!-- 评论元数据 -->
                <a>张林红</a>
                <!-- 评论者 -->
                <span style="color: rgb(233, 233, 233); margin-left: 2rem"
                  >评论于2021年08月18日 10:56</span
                >
              </div>
            </div>
            <span>好评！真不错</span>
          </el-card>
        </div>
      </div>
      <div>
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar
              :size="50"
              src="https://cdn.jsdelivr.net/gh/81674944/blog_imgs/img/lyb.jpg"
            ></el-avatar>
          </div>
          <el-card class="card2">
            <div slot="header" class="clearfix">
              <div class="am-comment-meta">
                <!-- 评论元数据 -->
                <a>梁艺缤</a>
                <!-- 评论者 -->
                <span style="color: rgb(233, 233, 233); margin-left: 2rem"
                  >评论于2021年08月15日 09:16</span
                >
              </div>
            </div>
            <span>好评！真不错</span>
          </el-card>
        </div>
      </div>
      <div>
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar
              :size="50"
              src="https://cdn.jsdelivr.net/gh/81674944/blog_imgs/img/lz.jpg"
            ></el-avatar>
          </div>
          <el-card class="card2">
            <div slot="header" class="clearfix">
              <div class="am-comment-meta">
                <!-- 评论元数据 -->
                <a>李泽</a>
                <!-- 评论者 -->
                <span style="color: rgb(233, 233, 233); margin-left: 2rem"
                  >评论于2021年08月14日 10:11</span
                >
              </div>
            </div>
            <span>好评！真不错</span>
          </el-card>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style scoped>
/* 大卡片 */
.box-card {
  width: 100rem;
  height: 100rem;
}
/* 好评差评的框 */
.card1 {
  margin-left: 2rem;
  margin-top: 8rem;
  width: 70rem;
  height: 3rem;
  background-color: rgb(227, 231, 231);
  display: flex;
  align-items: center;
}

/* 评论 */
.card2 {
  margin-left: 5rem;
  margin-top: -3.8rem;
  width: 60rem;
  height: 10rem;
}
.demo-basic--circle {
  margin-top: 3rem;
  margin-left: 2rem;
}

/* 买家印象 */
.comm-tags {
  float: left;
  height: 21px;
  line-height: 21px;
  padding: 0 7px;
  margin-top: 1rem;
  margin-left: 11rem;
  background: #f47602;
  margin-bottom: 10px;
  color: #fff;
}
.comm-tag {
  float: left;
  height: 21px;
  line-height: 21px;
  padding: 0 7px;
  margin-top: 1rem;
  margin-left: 3rem;
  background: #f47602;
  margin-bottom: 10px;
  color: #fff;
}
.comm-tagss {
  float: left;
  height: 21px;
  line-height: 21px;
  padding: 0 7px;
  margin-top: 1rem;
  margin-left: 12.1rem;
  background: #f47602;
  margin-bottom: 10px;
  color: #fff;
}
</style>